<!-- 车机管理 -->
<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" @change="searchChange" />
    <table-index :table="table" @loadData="loadData" />
  </div>
  <!-- 导入 -->
  <import-modal ref="imoportRef" action="/carVehicle/importExcel" download-import="/GPS设备导入模板.xlsx" @ok="loadData" />

  <association ref="associationModal" @save="loadData" />
  <changeCar ref="changecarModal" @save="loadData" />
  <gps ref="gpsModal" />
  <disposeof ref="disposeofModal" @save="loadData" />
</template>

<script setup name="CarVehicleList">
  import association from '../car-vehicle/components/association.vue'
  import changeCar from '../car-vehicle/components/changeCar.vue'
  import gps from '../car-vehicle/components/gps.vue'
  import disposeof from '../car-vehicle/components/disposeof.vue'
  import { getVehicleList, vehicleExport, vehicleSupplier } from '@/api/asset/vehicle'
  import { useExport } from '@/hooks/list'
  import { onMounted, ref, reactive, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { Message } from '@arco-design/web-vue'

  import useNavigate from '@/hooks/useNavigate'

  const { navigateTo } = useNavigate()
  const imoportRef = ref(null)

  import { useSysDict, sysDict, usePageDict } from '@/hooks/useDict'
  const vehicleDict = usePageDict('vehicleDict')
  useSysDict(['equipment_brand', 'connection_mode'])

  const associationModal = ref(null)
  const changecarModal = ref(null)
  const gpsModal = ref(null)
  const disposeofModal = ref(null)

  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '设备编号', prop: 'vehicleNumLike', type: 'a-input' },
      { label: '安装车辆', prop: 'licenseNoLike', type: 'a-input' },
      {
        label: '设备品牌',
        prop: 'vehicleFirmList',
        type: 'a-select',
        multiple: true,
        options: vehicleDict.vehicleFirmMap,
      },
      {
        label: '设备型号',
        prop: 'vehicleModelList',
        type: 'a-select',
        multiple: true,
        options: sysDict.equipment_brand,
      },
      {
        label: '设备类型',
        prop: 'vehicleTypeList',
        type: 'a-select',
        multiple: true,
        options: vehicleDict.equipmentTypeMap,
      },

      {
        label: '接电方式',
        prop: 'connectionModeList',
        type: 'a-select',
        multiple: true,
        options: sysDict.connection_mode,
      },
      {
        label: '设备供应商',
        prop: 'supplierId',
        type: 'a-select',
        options: supplierList.value,
      },
      {
        label: '设备状态',
        prop: 'status',
        type: 'a-select',
        options: vehicleDict.vehicleStatusMap,
      },
      {
        label: '在线状态',
        prop: 'onLineState',
        type: 'a-select',
        options: vehicleDict.carVehicleOnLineStateMap,
      },
    ]
  })
  // 接口参数（不包含page信息）
  const queryParam = reactive({})

  // table 配置
  const table = useTable({
    columns: [
      { title: '设备编号', dataIndex: 'vehicleNum', fixed: 'left', width: 200 },
      { title: '设备类型', dataIndex: 'vehicleTypeStr', width: 100 },
      { title: '设备品牌', dataIndex: 'vehicleFirm', width: 100 },
      { title: '设备型号', dataIndex: 'vehicleModelStr', width: 100 },
      { title: '设备供应商', dataIndex: 'supplierName', width: 120 },
      { title: '接电方式', dataIndex: 'connectionModeStr', width: 100 },
      { title: '电量', dataIndex: 'electricQuantity', width: 70 },
      { title: '设备状态', dataIndex: 'statusStr', width: 100 },
      { title: '在线状态', dataIndex: 'onLineStateStr', width: 100 },
      { title: '安装车辆', dataIndex: 'licenseNo', width: 100 },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:asstes:device:car-vehicle.detail',
        method: (record) => {
          navigateTo(`/car-vehicle/detail/${record.id}`, `${record.vehicleNum}-详情`)
        },
      },
      {
        label: '编辑',
        show: (record) => record.status == 0 || record.status == 1,
        permission: 'svms:asstes:device:car-vehicle.edit',
        method: (record) => {
          navigateTo(`/car-vehicle/edit/${record.id}`, `${record.vehicleNum}-编辑`)
        },
      },
      {
        label: '关联车辆',
        show: (record) => record.status == 0,
        permission: 'svms:asstes:device:car-vehicle.association',
        method: (record) => {
          associationModal.value.show(record.id)
        },
      },
      {
        label: '更换车辆',
        show: (record) => record.status == 1,
        permission: 'svms:asstes:device:car-vehicle.changecar',
        method: (record) => {
          changecarModal.value.show(record.id)
        },
      },
      {
        label: '定位',
        permission: 'svms:asstes:device:car-vehicle.gps',
        show: (record) => record.status == 1,
        method: (record) => {
          gpsModal.value.show(record.id)
        },
      },
      {
        label: '处置',
        permission: 'svms:asstes:device:car-vehicle.disposeof',
        show: (record) => record.status == 0 || record.status == 1,
        method: (record) => {
          disposeofModal.value.show(record.id)
        },
      },
      {
        label: '操作记录',
        permission: 'svms:asstes:device:car-vehicle.operaterecords',
        method: (record) => {
          navigateTo(`/car-vehicle/detail/${record.id}?activeType=${2}`, `${record.vehicleNum}-操作记录`)
        },
      },
    ],
    buttons: [
      {
        label: '云知行登录',
        method: () => {
          if (gpsLoginUrl.value) {
            window.open(gpsLoginUrl.value)
          } else {
            Message.warning('链接获取中，请稍后重试')
          }
        },
      },
      {
        mode: 'import',
        label: '导入',
        permission: 'svms:asstes:device:car-vehicle.import',
        method: () => {
          imoportRef.value.show()
        },
      },
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:asstes:device:car-vehicle.export',
        method: () => handleExport(),
      },
      {
        type: 'primary',
        permission: 'svms:asstes:device:car-vehicle.add',
        mode: 'import',
        icon: 'plus',
        label: '新增',
        method: () => {
          navigateTo('/car-vehicle/create')
        },
      },
    ],
  })
  // 云知行登录链接
  const gpsLoginUrl = computed(() => {
    const vehicleUrlMap = vehicleDict.vehicleUrlMap
    if (vehicleUrlMap && vehicleUrlMap.length > 0) {
      return vehicleUrlMap[0].value
    } else {
      return null
    }
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getVehicleList)

  // 导出事件
  const handleExport = () => {
    useExport(vehicleExport, queryParam)
  }

  // 获取供应商
  const supplierList = ref([])
  const getSupplier = () => {
    vehicleSupplier({ supplierType: 5 }).then((res) => {
      res.result.map((e) => {
        e.value = e.id
        e.label = e.supplierName
      })
      supplierList.value = res.result
    })
  }

  onMounted(() => {
    loadData()
    getSupplier()
  })
</script>

<style lang="less" scoped></style>
